<template>
  <EnteringForm
    ref="enteringForm"
    v-bind="dialog"
		width="80%"
    :fullscreen="true"
    @close="close"
		:showFooter="false"
  >
    <el-form ref="formRef" :model="queryParams" :rules="rules">
      <el-row type="flex" style="flex-wrap: wrap">
				<!-- <el-col :span="6">
          <el-form-item label="编号:" prop="id">
            <el-input
              v-model.trim="queryParams.id"
              placeholder="请输入"
							disabled
              clearable
            ></el-input>
          </el-form-item>
        </el-col> -->
				<el-col :span="8">
          <el-form-item label="活动名称:" prop="name">
            <!-- <el-input
              v-model.trim="queryParams.name"
              placeholder="请输入"
              size="mini"
							disabled
              clearable
            ></el-input> -->
            <span>{{ queryParams.name }}</span>
          </el-form-item>
        </el-col>
				<el-col :span="8">
          <el-form-item label="所属商家:" prop="name">
            <!-- <el-input
              :value="queryParams.storeId==0 ? '全部' : shopList.find(item=>item.id==queryParams.storeId) ? shopList.find(item=>item.id==queryParams.storeId).name : '--'"
              placeholder="请输入"
              size="mini"
							disabled
              clearable
            ></el-input> -->
            <span>{{ queryParams.storeId==0 ? '全部' : shopList.find(item=>item.id==queryParams.storeId) ? shopList.find(item=>item.id==queryParams.storeId).name : '--' }}</span>
          </el-form-item>
        </el-col>
				<el-col :span="8">
          <el-form-item label="开奖时间:">
            <!-- <el-input
              v-model.trim="queryParams.winningTime"
              placeholder="请输入"
              size="mini"
							disabled
              clearable
            ></el-input> -->
            <span>{{ queryParams.winningTime }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="参与人数:">
            <!-- <el-input
              v-model.trim="queryParams.partNum"
              placeholder="请输入"
              size="mini"
							disabled
              clearable
            ></el-input> -->
            <span>{{ queryParams.partNum }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建时间:">
            <!-- <el-input
              v-model.trim="queryParams.createTime"
              placeholder="请输入"
							disabled
              clearable
            ></el-input> -->
            <span>{{ queryParams.createTime }}</span>
          </el-form-item>
        </el-col>
        
      </el-row>
    </el-form>
		<!-- 分割线 -->
		<el-divider></el-divider>
		<!-- 表格 -->
		<div>
        <el-form>
          <el-row :gutter="20">
            <el-col :xs="6" :sm="6" :lg="6">
              <el-form-item label="商家">
                <el-select
                  v-model="search.storeId"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option :label="item.name" :value="item.id" v-for="(item, index) in shopList"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
          <el-form-item label="用户:">
            <el-input
              v-model.trim="search.userId"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
            <el-col :xs="6" :sm="6" :lg="6">
              <el-form-item label="是否使用">
                <el-select
                  v-model="search.used"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option label="是" :value="1" />
                  <el-option label="否" :value="0" />
                </el-select>
              </el-form-item>
            </el-col>
						<el-col :xs="6" :sm="6" :lg="6">
              <el-form-item label="是否失效">
                <el-select
                  v-model="search.invalid"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option label="是" :value="1" />
                  <el-option label="否" :value="0" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :lg="6">
              <el-button type="primary" icon="Search" @click="getList">搜索</el-button>
              <el-button icon="Refresh" @click="()=>{ search = {}; getList() }">重置</el-button>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-table
                :data="listData"
                v-loading="loading"
                ref="table"
                style="margin-top: 20px"
              >
                <el-table-column label="#" type="index" align="left" />
                <!-- <el-table-column label="编号" prop="couponId" align="left" /> -->
                <el-table-column label="活动名称" prop="activityName" align="left" />
                <el-table-column label="所属商家" align="left">
                  <template #default="scope">
                    <span>{{ scope.row.storeId==0 ? '全部' : shopList.find(item=>item.id==scope.row.storeId) ? shopList.find(item=>item.id==scope.row.storeId).name : '--' }}</span>
                  </template>
                </el-table-column>

                <el-table-column label="参与人数" prop="partNum" align="left" />
                <el-table-column label="抽奖积分" prop="integral" align="left" />
                <el-table-column label="活动图片" prop="images" align="left">
                  <template #default="scope">
                    <div style="display: flex;justify-content: flex-start;">
                      <ImagePreview style="width: 40px;height: 40px;" v-for="item in scope.row.images.split(',')" :key="item" :src="item"></ImagePreview>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="开奖时间" prop="winningTime" align="left" />
                <el-table-column label="中奖号码" prop="prizeNo" align="left" />
                <el-table-column label="报文人数" prop="enrollNum" align="left" />
                <el-table-column label="剩余人数" prop="residueNum" align="left" />
                <el-table-column label="创建时间" prop="createTime" align="left" />
                <el-table-column fixed="right" label="操作" align="center" min-width="160px">
                  <template #default="scope">
                    <div style="display: flex; justify-content: center">
                      <el-button
                        type="primary"
                        size="small"
                        @click="proxy.$refs.useInfoTwoRef.init('edit',shopList, scope.row)"
                        >用户参与记录</el-button
                      >
                    </div>
                  </template>
                </el-table-column>

              </el-table>
              <Pagination
                v-show="total"
                v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize"
                :total="total"
                @pagination="getList"
              />
            </el-col>
          </el-row>
        </el-form>
      </div>
      <useInfoTwo ref="useInfoTwoRef" v-if="!loading" />
  </EnteringForm>
</template>

<script setup>
import { getCurrentInstance, reactive, ref } from "vue";
// const { proxy } = getCurrentInstance() //proxy
import { ElMessage } from "element-plus";
import useInfoTwo from "./useInfoTwo.vue"
import {  useInfoApi } from '@/api/operates/active.js'
// import { listPage as shopListApi } from '@/api/operates/shopList/index'

const { proxy } = getCurrentInstance()
const emit = defineEmits(["success"]);
const dialogType = ref('')
const shopList = ref([])
const dialog = reactive({
  visible: false,
  title: "",
});
const rules = reactive({});
const loading = ref(false);
const total = ref(0)
const queryParams = ref({
	enable: 1,
	recommend: 0,
})
const search = ref({})
const listData = ref([])

function init(type,list, record){
  // getShopList()
  shopList.value = [
		// {id:0, name:'全部'},
		...list
	]
	dialogType.value = type
	dialog.title='发起记录'
	dialog.visible = true
	// 如果是编辑，回显数据
	if(dialogType.value=='edit'){
		queryParams.value = { ...record };
		// 查询表格
		getList()
	}
};

//获取列表数据
const getList = () => {
  loading.value = true
  let query = {
    path:{
			id: queryParams.value.id
		},
		query: {
      pageNum: 1,
      pageSize: 10,
      ...search.value
    }
  }
  useInfoApi(query)
    .then(res => {
      listData.value = res.data.list
      total.value = res.data.total
      loading.value = false
    })
    .catch(err => {
      loading.value = false
      ElMessage.error(err.message || `${text}失败`)
    })
}

// function getShopList(){
//   shopListApi({pageNum:1, pageSize:100000}).then((res)=>{
//     shopList.value = res.data.list
//   })
// }
function close(){
  dialog.visible = false;
  // proxy.$refs.formRef.resetFields();
	queryParams.value = {}
};
defineExpose({ init });
</script>

<style scoped>
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
/* ::v-deep .el-input__wrapper{
	width: 100%;
} */
</style>
